<template>
    <div style="height: calc(100% - 77px);">
        <el-tabs style="width:100%;">
            <el-tab-pane label="操作系统" name="first"></el-tab-pane>
            <el-tab-pane label="外包开发软件" name="second"></el-tab-pane>
            <el-tab-pane label="商业软件" name="third"></el-tab-pane>
            <el-tab-pane label="自主开发软件" name="fourth"></el-tab-pane>
            <el-tab-pane label="数据库软件" name="five"></el-tab-pane>
            <el-tab-pane label="中间件" name="six"></el-tab-pane>
            <el-tab-pane label="工具软件" name="seven"></el-tab-pane>
        </el-tabs>
        <el-main style="height: calc(100% - 70px);">
            <div style="margin:-20px 10px 10px 10px">
                <span style="color:#706f6f">网络属性:&nbsp;</span>
                <el-select v-model="value" clearable placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>


            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="shebeiID" label="设备ID">
                </el-table-column>
                <el-table-column prop="zichanmingcheng" label="资产名称">
                </el-table-column>
                <el-table-column prop="wangluoshuxing" label="网络属性">
                </el-table-column>
                <el-table-column prop="suoshujifang" label="所属机房">
                </el-table-column>
                <el-table-column prop="IPdizhi" label="IP地址">
                </el-table-column>
                <el-table-column prop="zerenren" label="责任人">
                </el-table-column>
                <el-table-column label="使用状态">
                    <template slot-scope="scope">
                        <span :style="{ color: scope.row.shiyongzhuangtai === '正常' ? 'inherit' : 'red' }">
                            {{ scope.row.shiyongzhuangtai === '正常' ? '正常' : '故障' }}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer style="height:50px;">
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[5]" :page-size="[5]"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-footer>

    </div>
</template>

<script>
export default {
    data() {
        return {
            total: 0,
            options: [
                {
                    value: '选项1',
                    label: '全部'
                },
                {
                    value: '选项2',
                    label: '服务器'
                },
                {
                    value: '选项3',
                    label: '储存'
                },
                {
                    value: '选项4',
                    label: '网络设备'
                },
                {
                    value: '选项5',
                    label: '机房环境'
                },
                {
                    value: '选项6',
                    label: '桌面PC'
                },
                {
                    value: '选项7',
                    label: '外设'
                },
            ],
            value: '',
            tableData: [
                {
                    shebeiID: '1',
                    zichanmingcheng: '计财用友数据库',
                    wangluoshuxing: '涉密',
                    suoshujifang: '外网机房',
                    IPdizhi: '192.168.23.1',
                    zerenren: '王海波',
                    shiyongzhuangtai: '正常',
                },
                {
                    shebeiID: '2',
                    zichanmingcheng: 'CRM系统',
                    wangluoshuxing: '公用',
                    suoshujifang: '内网机房',
                    IPdizhi: '192.168.1.2',
                    zerenren: '李华',
                    shiyongzhuangtai: '故障',
                },
            ],
            currentPage: 1,
            count: 5,//每页展示的条数 
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        //渲染
        Redom() {
            this.$axios({
                url: `wuJiThree?_page=${this.currentPage}&_limit=${this.count}`,
            }).then(({ data }) => {
                this.tableData = data
            })
            this.$axios({
                url: 'wuJiThree'
            }).then(({ data }) => {
                this.total = data.length
            })
        },
        //分页
        handleCurrentChange(v) {
            this.currentPage = v;
            this.$axios({
                url: `wuJiThree?_page=${v}&_limit=5`,
            }).then((data) => {
                this.tableData = data.data
            })
        },
    },
    mounted() {
        this.Redom()
    },
}
</script>

<style scoped>
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>